<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	
	<!--引入jquery-->
	<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<!--引入bootsrap-->
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
	<script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/category.css"/>
	<script type="text/javascript">
		$(function () {
			//发送ajax，请求商品分类数据
			$.post(
				"${pageContext.request.contextPath}/TypeServlet?action=queryAll",//url
				//data-json格式数据
				function (types) {//callback
					$.each(
						types,
						function(index) {
							var tName = types[index].tName;
							var typeId = types[index].typeId;
							//动态创建子元素
							var $Tr = $("<tr class='text-center'></tr>");
							var $Td0 = $("<td>"+ (index+1) +"</td>");
							var $Td1 = $("<td>"+ tName +"</td>");
							var $Td2 = $("<td>删除</td>");
							
							//获得父元素
							var $Table = $("#ts");
							//添加阶段
							$Tr.append($Td0);
							$Tr.append($Td1);
							$Tr.append($Td2);
							$Table.append($Tr);
						}
					);
				},
				"json"
			);
		});
	</script>
</head>
	<body>
		
		<div class="container">
			
			<div class="box-header with-border">
	            <h3 class="box-title">房间类型</h3>
	        </div>
			
			<table id= "ts" class="table table-bordered table-hover table-striped categorylist">
				
				<tr>
					<th class="text-center">编号</th>
					<th class="text-center">名称</th>
					<th class="text-center">操作</th>
				</tr>
				
				
				<c:forEach items="${types}" var="list" varStatus="state">
					<tr> 
						<td>${ state.index + 1}</td> 
						<td>${ state.tName}</td> 
						<td><a href="#">删除</a></td>
					</tr> 
				</c:forEach>
		
			</table>
			
		</div>
		
	</body>
</html>
